<template>
  <div class="todo-app">
    <h1>Todo List</h1>
    <div>{{newTodoText}}</div>
    <!-- 添加新任务 -->
    <div class="add-todo" >      
      <div >
        <input
        v-model="newTodoText"
        @keypress.enter="addTodo"
        placeholder="添加新任务..."
        class="todo-input"
        style="width: 350px;"
      />
      </div>
      <button @click="addTodo" class="add-btn">添加</button>
    </div>

    <!-- 任务列表 -->
    <div class="todo-list">
      <div 
        v-for="todo in filteredTodos" 
        :key="todo.id" 
        class="todo-item"
        :class="{ completed: todo.completed }"
      >
        <input
          type="checkbox"
          v-model="todo.completed"
          class="todo-checkbox"
        />
        <span 
          class="todo-text"
          @dblclick="editTodo(todo)"
          :contenteditable="todo.isEditing"
          @blur="saveEdit(todo)"
          @keyup.enter="saveEdit(todo)"
          @keyup.esc="cancelEdit(todo)"
        >
          {{ todo.text }}
        </span>
        <button 
          @click="deleteTodo(todo.id)" 
          class="delete-btn"
        >
          删除
        </button>
      </div>
    </div>

    <!-- 统计和筛选 -->
    <div class="todo-footer">
      <span>{{ remainingTodos }} 个任务未完成</span>
      <div class="filters">
        <button 
          @click="setFilter('all')" 
          :class="{ active: currentFilter === 'all' }"
        >
          全部
        </button>
        <button 
          @click="setFilter('active')" 
          :class="{ active: currentFilter === 'active' }"
        >
          未完成
        </button>
        <button 
          @click="setFilter('completed')" 
          :class="{ active: currentFilter === 'completed' }"
        >
          已完成
        </button>
      </div>
      <button 
        @click="clearCompleted" 
        class="clear-btn"
        :disabled="!completedTodos.length"
      >
        清除已完成
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 生成唯一ID
const generateId = () => Math.floor(Math.random() * 10000);

// 状态定义
const newTodoText = ref('');
const todos = ref([
  // 初始示例数据
  { id: generateId(), text: '学习 Vue 3', completed: false, isEditing: false },
  { id: generateId(), text: '创建 Todo 应用', completed: false, isEditing: false }
]);
const currentFilter = ref('all');

// 计算属性
const filteredTodos = computed(() => {
  switch (currentFilter.value) {
    case 'active':
      return todos.value.filter(todo => !todo.completed);
    case 'completed':
      return todos.value.filter(todo => todo.completed);
    default:
      return todos.value;
  }
});

const remainingTodos = computed(() => {
  return todos.value.filter(todo => !todo.completed).length;
});

const completedTodos = computed(() => {
  return todos.value.filter(todo => todo.completed);
});

// 方法
const addTodo = () => {
  if (newTodoText.value.trim()) {
    todos.value.push({
      id: generateId(),
      text: newTodoText.value.trim(),
      completed: false,
      isEditing: false
    });
    newTodoText.value = '';
  }
};

const deleteTodo = (id) => {
  todos.value = todos.value.filter(todo => todo.id !== id);
};

const editTodo = (todo) => {
  // 先取消其他正在编辑的任务
  todos.value.forEach(t => t.isEditing = false);
  todo.isEditing = true;
  
  // 聚焦到编辑元素（需要等DOM更新后）
  setTimeout(() => {
    const editable = document.querySelector(`[contenteditable="true"]`);
    if (editable) {
      editable.focus();
      // 光标定位到末尾
      const range = document.createRange();
      const sel = window.getSelection();
      range.setStartAfter(editable.lastChild);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }
  }, 0);
};

const saveEdit = (todo) => {
  const newText = todo.text.trim();
  if (newText) {
    todo.text = newText;
  } else {
    // 如果内容为空则删除该任务
    deleteTodo(todo.id);
  }
  todo.isEditing = false;
};

const cancelEdit = (todo) => {
  todo.isEditing = false;
};

const setFilter = (filter) => {
  currentFilter.value = filter;
};

const clearCompleted = () => {
  todos.value = todos.value.filter(todo => !todo.completed);
};
</script>

<style scoped>
.todo-app {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}
.todo-move {
  transition: 5s;
}
h1 {
  text-align: center;
  color: #333;
}

.add-todo {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.todo-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.add-btn {
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-btn:hover {
  background-color: #359e75;
}

.todo-list {
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item.completed .todo-text {
  text-decoration: line-through;
  color: #888;
}

.todo-checkbox {
  margin-right: 10px;
  width: 18px;
  height: 18px;
}

.todo-text {
  flex: 1;
  outline: none;
  font-size: 16px;
}

.todo-text[contenteditable="true"] {
  border: 1px solid #42b983;
  padding: 2px 4px;
  border-radius: 3px;
}

.delete-btn {
  padding: 4px 8px;
  background-color: #ff4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.7;
}

.delete-btn:hover {
  opacity: 1;
}

.todo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  color: #666;
  font-size: 14px;
}

.filters button {
  margin: 0 4px;
  padding: 4px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}

.filters button.active {
  border-color: #42b983;
  color: #42b983;
}

.clear-btn {
  padding: 4px 8px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.clear-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>